<html>
	<head>
		<title>
			头像墙示例
		</title>
		<script id="jquery_183" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="http://git.oschina.net/bluishoul/portrait-wall/raw/master/jquery-portraitwall.js"></script>
		<script type="text/javascript">
			var item_tpl = '<div class="item" id="" title="" data-hashd="1"><div class="info"><a href="http://www.oschina.net/" target="_blank">OSChina</a></div></div>';
			var images = [
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/253224_100.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/130291_100.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/139572_100.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/127735_100.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/571282_100.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/590093_100.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/912704_100.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/933828_100.jpg"
			];
			var hdimages = [
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg",
				"http://sandbox.runjs.cn/uploads/rs/90/wwourf2n/89964_200.jpg"
			];
			$(function() {
				//构建items
				var counts = images.length;
				var pt = $(".portrait-wall");
				for (var i = 0; i < counts; i++) {
					var item = $(item_tpl);
					item.attr("id", "item" + (i + 1));
					pt.append(item);
					if(i==0){
						item.find(".info").css("bottom","0px");
					}
				}
				//调用portrait-wall
				$(".portrait-wall").portraitwall({
					width: 100,
					height: 100,
					columns: 4,
					rows:3,
					images: images,
					hdimages: hdimages,
					onHDShow:function(item,options){
						$(item).find('.info').animate({
							bottom:0
						});
					},
					onHDClick:function(item,options){
						
					},
					onNoHDClick:function(item,options){
						var self = $(item).find('.info');
						if(parseInt(self.css("bottom"))==-100){
							self.animate({
								bottom:0
							});
						}else{
							self.animate({
								bottom:-100
							});
						}
					},
					css: [
						'.portrait-wall{margin:40px auto;}',
						'.portrait-wall .item{overflow:hidden;}',
						'.portrait-wall .cur{box-shadow:0px 0px 10px rgba(0,0,0,0.2) inset;}',
						'.portrait-wall .info{position:absolute;text-align:center;width:100%;height:100px;bottom:-100px;background-color:rgba(0, 0, 0, .5);;color:#FFF;line-height:100px;}',
						'.portrait-wall .info a{color:#FFF;text-shadow: 2px 2px 1px black;font-size: 14px;}',
						'.portrait-wall .info.show{bottom:0px;}'
					]
				});
			
			});
		</script>
		</head>
	<body>
		<div class="portrait-wall">
		</div>
	</body>
</html>